<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.2.min.js">
			
		</script>
		<script type="text/javascript" src="js/highcharts.js">	
		</script>
		<script type="text/javascript" src="js/highcharts-3d.js">
			
		</script>
	</head>
	<body>
		 <div id="containerEveryque" style=" min-width:550px;max-width: 50%;height:450px;margin:0 auto;float:left;"></div>
		 <script type="text/javascript">
		 
         /*  var da = [
                {name: "801", data: 0, qu: 631},
                {name: "680", data: 0, qu: 630},
                {name: "680", data: 0, qu: 631},
                {name: "680", data: 0, qu: 632},
                {name: "680", data: 0, qu: 635},
                {name: "803", data: 2, qu: 630},
                {name: "803", data: 0, qu: 631},
                {name: "803", data: 0, qu: 632},
                {name: "803", data: 0, qu: 635},
                {name: "801", data: 0, qu: 632},
                {name: "801", data: 0, qu: 635},
                {name: "801", data: 3, qu: 630}
                ];
          */      
                 var da = [
               // {name: "801", data: 3, qu: 630},
                 {name: "801", data: 0, qu: 630},
                {name: "680", data: 0, qu: 630},
                {name: "680", data: null, qu: 632},
                {name: "680", data: null, qu: 635},
                //{name: "803", data: 2, qu: 630},
                {name: "803", data: 0, qu: 630},
                {name: "801", data: 0, qu: 631},
                {name: "680", data: 0, qu: 631},
                {name: "803", data: 0, qu: 631},
                {name: "803", data: null, qu: 635}, 
                {name: "803", data: null, qu: 632},
                {name: "801", data: 0, qu: 632},
                {name: "801", data: 0, qu: 635}
                ];
              Array.prototype.unique=function(){
              	var n={},r=[];
              	for(var i=0;i<this.length;i++){
              		if(!n[this[i]]){
              			n[this[i]]=true;
              			r.push(this[i]);
              		}
              	}
              	return r;
              };
               var data1=[];
              
               var ag=da.map(function(item){
               	return item.name;
               });   
               var age=ag.unique();//获取坐系号
               var agent=Array.sort(age);//坐席号小到大排序
               console.log(agent);
              var que=da.map(function(item){
              	return item.qu;
              });
              var queue1=que.unique();//获取队列号
              var queue=Array.sort(queue1);//队列号小到大排序 
              console.log(queue);
                for(var i=0;i<agent.length;i++){
                	for(var j=0;j<queue.length;j++){
                       da.forEach(function(item){
                	      if(item.name==agent[i]&&item.qu==queue[j]){
                		     data1.push(item);
                	       }
                        });
                    }
               }
                console.log(data1);
       
            var NewData= {};
              var num =0;
            data1.forEach(function(item){
                if(!NewData[item.name]){
                    NewData[item.name] = [];
                }
                NewData[item.name].push(item.data);
                num=num+item.data;
                
            });
            console.log(num);
          //  console.log(NewData);
            var Result = [];
            Object.keys(NewData).forEach(function(item){
               // console.log(item);
                Result.push({name:item, data:NewData[item]});
            });
            console.log(Result);
            
            if(num==0){
            //$(function () {
            Highcharts.setOptions({
                colors: ['	#058DC7', '#D9006C', '	#02DF82'],         
                 yAxis: { tickPositions: [0, 5, 10, 15],},
                dataLabels: {         //只使用于单一柱状图
                    enabled: true,    //默认是false，即默认不显示数值
                    color: '#666',    //字体颜色
                    align: 'center'   //居柱子中间
                }
            });
            }else{
            	        Highcharts.setOptions({
                colors: ['	#058DC7', '#D9006C', '	#02DF82'],
                
                
                dataLabels: {         //只使用于单一柱状图
                    enabled: true,    //默认是false，即默认不显示数值
                    color: '#666',    //字体颜色
                    align: 'center'   //居柱子中间
                }
                  });
            }
            //$('#container').highcharts({
            var chart = new Highcharts.Chart({
                chart: {
                    type: 'column',
                    renderTo: 'containerEveryque',
                    options3d: {
                        enabled: true,
                        alpha: 11,
                        beta: 5,
                        viewDistance: 25,
                        depth: 50
                    },
                   // marginTop: 80,
                    marginleft: 0
                },
                title: {
                    text: '各队列座席通话量柱状图'
                },
                subtitle: {
                    text: '被管理坐席'
                },
                xAxis: {
                    title:{
                        text:'队列'
                    },
                    categories: queue
                },
                yAxis: {
                    min: 0,
                    //opposite: true,
                   
                    allowDecimals:false,
                    title: {
                        text: '数量/(个)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">队列：{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">座席({series.name}): </td>' +
                    '<td style="padding:0"><b>{point.y} </b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },

                plotOptions: {
                    column: {
                       // pointPadding: 0.2,
                       // borderWidth: 0
                        //stacking: 'normal',
                        depth: 30
                    }
                },

                series: Result
               /* series: [{
                    data:[11,12,13,14,15,16,17],
                    dataLabels: {         //只使用于单一柱状图
                        enabled: true,    //默认是false，即默认不显示数值
                        color: '#666',    //字体颜色
                        align: 'center'   //居柱子中间
                    }
                }]
                */
            
            });
           
		 </script>
	</body>
</html>
